<style scoped lang="less">
    .ivu-btn{
        margin:0 5px;
    }
</style>
<template>
    <div>
        <Table border :content="self" :columns="columns1" :data="data1"></Table>
        <Page :total="100" show-sizer style="margin-top:20px;"></Page>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                self: this,
                columns1: [
                    {
                        title: 'id',
                        key: 'id',
                        width: 60,
                        render (row, column, index) {
                            return `${index+1}`;
                        }
                    },
                    {
                        title: '标题',
                        key: 'title'
                    },
                    {
                        title: '作者',
                        key: 'author',
                        render (row, column, index) {
                            return `<Icon type="person"></Icon> <strong>${row.author}</strong>`;
                        }
                    },
                    {
                        title: '分类',
                        key: 'cate'
                    },
                    {
                        title: '日期',
                        key: 'date'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render (row, column, index) {
                            return `<i-button type="primary" size="small" @click.native="show(${index})">查看</i-button> <i-button type="primary" size="small" @click.native="show(${index})">编辑</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
                        }
                    }
                ],
                data1: [
                    {
                        title: '文章标题',
                        author: 'pixel',
                        cate: '旅游',
                        date: '2016/12/06',
                    },
                    {
                        title: '文章标题',
                        author: 'pixel',
                        cate: '旅游',
                        date: '2016/12/06',
                    },
                    {
                        title: '文章标题',
                        author: 'pixel',
                        cate: '旅游',
                        date: '2016/12/06',
                    },
                    {
                        title: '文章标题',
                        author: 'pixel',
                        cate: '旅游',
                        date: '2016/12/06',
                    },
                    {
                        title: '文章标题',
                        author: 'pixel',
                        cate: '旅游',
                        date: '2016/12/06',
                    },
                    {
                        title: '文章标题',
                        author: 'pixel',
                        cate: '旅游',
                        date: '2016/12/06',
                    },
                    {
                        title: '文章标题',
                        author: 'pixel',
                        cate: '旅游',
                        date: '2016/12/06',
                    },
                    {
                        id: '1',
                        title: '文章标题',
                        author: 'pixel',
                        cate: '旅游',
                        date: '2016/12/06',
                    },
                    {
                        title: '文章标题',
                        author: 'pixel',
                        cate: '旅游',
                        date: '2016/12/06',
                    },
                    {
                        title: '文章标题',
                        author: 'pixel',
                        cate: '旅游',
                        date: '2016/12/06',
                    },
                ]
            }
        },
        methods: {
            show (index) {
                this.$Modal.info({
                    title: '用户信息',
                    content: `文章标题：${this.data1[index].title}<br>作者：${this.data1[index].author}<br>类型：${this.data1[index].cate}<br>发布时间：${this.data1[index].date}`
                })
            },
            remove (index) {
                this.data1.splice(index, 1);
            }
        }
    }
</script>